﻿<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height: 150px; border-bottom-width: 1px; padding: 10px; font-size: 14px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Datagrid/ViewOperateRowSource" target="_blank">点击查看扩展代码</a>
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Datagrid/ViewDatagridCssSource" target="_blank">点击查看扩展样式</a>
        <br />
        js依赖项：
        <br />
        [query-1.11.0.js]、[jquery.jdirk.js]、[jquery.easyui.min.js]、[jeasyui.extensions.datagrid.findRow.js]、[jeasyui.extensions.datagrid.getDom.js]、
        <br />
        [jeasyui.extensions.datagrid.getRowData.js]、[jeasyui.extensions.datagrid.moveRow.js]、[jeasyui.extensions.datagrid.operateRow.js]

        <br /><br />
        css依赖项：
        <br />
        [jeasyui.extensions.datagrid.css]
    </div>
    <div data-options="region:'center',border:false,title:'此处仅显示“功能演示”选项卡所示功能基于本扩展的实现源码'" style="padding: 15px; font-size: 14px;">
        <a href="~/Demos/ExtensionDemos/Datagrid/OperateRowDemo.zip" target="_self">下载本扩展功能演示Demo</a>
        <br />
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>rowDnd</td>
                <td>Boolean 类型</td>
                <td>
                    该属性表示是否启用表格的行节点拖动功能；
                </td>
                <td>false</td>
            </tr>
            <tr>
                <td>onRowBeforeDrag</td>
                <td>Function 类型</td>
                <td>
                    该事件表示拖动 data-row(数据行) 之前触发的动作；该事件回调函数提供如下两个参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>index: 表示要拖动的 data-row(数据行) 索引号(从 0 开始计数)；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>row:   表示被拖动的 data-row(数据行) 的行数据对象，是一个 JSON-Object；<br />
                    该事件函数中的 this 指向当前 easyui-datagrid 的 DOM 对象(非 jQuery 对象)；<br />
                    备注：如果该事件函数返回 false，则取消当前的拖动 data-row(数据行) 操作。
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onRowStartDrag</td>
                <td>Function 类型</td>
                <td>
                    该事件表示开始拖动 data-row(数据行) 时触发的动作；该事件回调函数提供如下两个参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>index: 表示要拖动的 data-row(数据行) 索引号(从 0 开始计数)；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>row:   表示被拖动的 data-row(数据行) 的行数据对象，是一个 JSON-Object；<br />
                    该事件函数中的 this 指向当前 easyui-datagrid 的 DOM 对象(非 jQuery 对象)；
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onRowStopDrag</td>
                <td>Function 类型</td>
                <td>
                    该事件表示结束拖动 data-row(数据行) 时触发的动作；该事件回调函数提供如下两个参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>index: 表示要拖动的 data-row(数据行) 索引号(从 0 开始计数)；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>row:   表示被拖动的 data-row(数据行) 的行数据对象，是一个 JSON-Object；<br />
                    该事件函数中的 this 指向当前 easyui-datagrid 的 DOM 对象(非 jQuery 对象)；
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onRowDragEnter</td>
                <td>Function 类型</td>
                <td>
                    该事件表示当有其他的 data-row(数据行) 被拖动至当前 data-row(数据行) 时所触发的动作；该事件回调函数提供如下两个参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>targetRow: 表示当前 data-row(数据行) 的行数据对象，是一个 JSON-Object；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>sourceRow: 表示拖动过来的 data-row(数据行) 行数据对象，是一个 JSON-Object；<br />
                    该事件函数中的 this 指向当前 easyui-datagrid 的 DOM 对象(非 jQuery 对象)；<br />
                    备注：如果该事件函数返回 false，则立即取消当前的 data-row(数据行) 接收拖动过来对象的操作，并禁用当前 data-row(数据行) 的 droppable 效果；
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onRowDragOver</td>
                <td>Function 类型</td>
                <td>
                    该事件表示当有其他的 data-row(数据行) 被拖动至当前 data-row(数据行) 后并在上面移动时所触发的动作；该事件回调函数提供如下两个参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>targetRow: 表示当前 data-row(数据行) 的行数据对象，是一个 JSON-Object；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>sourceRow: 表示拖动过来的 data-row(数据行) 行数据对象，是一个 JSON-Object；<br />
                    该事件函数中的 this 指向当前 easyui-datagrid 的 DOM 对象(非 jQuery 对象)；<br />
                    备注：如果该事件函数返回 false，则立即取消当前的 data-row(数据行) 接收拖动过来对象的操作，并禁用当前 data-row(数据行) 的 droppable 效果；
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onRowDragLeave</td>
                <td>Function 类型</td>
                <td>
                    该事件表示当有其他的 data-row(数据行) 被拖动至当前 data-row(数据行) 后并拖动离开时所触发的动作；该事件回调函数提供如下两个参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>targetRow: 表示当前 data-row(数据行) 的行数据对象，是一个 JSON-Object；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>sourceRow: 表示拖动过来的 data-row(数据行) 行数据对象，是一个 JSON-Object；<br />
                    该事件函数中的 this 指向当前 easyui-datagrid 的 DOM 对象(非 jQuery 对象)；
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onRowBeforeDrop</td>
                <td>Function 类型</td>
                <td>
                    该事件表示放置 data-row(数据行) 之前触发的动作；该事件回调函数提供如下三个参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>targetRow: 表示目标位置的 data-row(数据行) 索引号(从 0 开始计数)；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>sourceRow: 表示要放置的 data-row(数据行) 索引号(从 0 开始计数)；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point:  表示放置到目标节点 target 的位置，String 类型，可能的值包括：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"top":      表示放置到目标位置 target 的上一格位置；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"bottom":   表示追加为目标位置 target 的下一格位置；<br />
                    该事件函数中的 this 指向当前 easyui-datagrid 的 DOM 对象(非 jQuery 对象)；<br />
                    如果该事件函数返回 false，则会立即停止放置数据行操作；
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onRowDrop</td>
                <td>Function 类型</td>
                <td>
                    该事件表示放置 data-row(数据行) 之后触发的动作；该事件回调函数提供如下三个参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>targetRow: 表示目标位置的 data-row(数据行) 索引号(从 0 开始计数)；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>sourceRow: 表示要放置的 data-row(数据行) 索引号(从 0 开始计数)；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point:  表示放置到目标节点 target 的位置，String 类型，可能的值包括：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"top":      表示放置到目标位置 target 的上一格位置；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"bottom":   表示追加为目标位置 target 的下一格位置；<br />
                    该事件函数中的 this 指向当前 easyui-datagrid 的 DOM 对象(非 jQuery 对象)；
                </td>
                <td>空</td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展方法API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width:5%;">重写</td>
                <td style="width:7%;">参数</td>
                <td>描述</td>
            </tr>
            <tr>
                <td>hideRow</td>
                <td>否</td>
                <td>param</td>
                <td>
                    隐藏当前 easyui-datagrid 当前页数据中指定行的数据；该方法的参数 param 可以是以下两种类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>待查找的行数据的 idField(主键) 字段值；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>function 类型，该回调函数签名为 function(row, index, rows)，其中 row 表示行数据对象、index 表示行索引号、rows 表示当前 easyui-datagrid 调用 getRows 返回的结果集；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>如果 param 参数为 function 类型，则 findRow 方法会对当前 easyui-datagrid 的当前页的每一行数据调用该回调函数；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>当回调函数返回 true 时，则表示找到需要查找的结果，立即停止循环调用并隐藏该行数据；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>如果回调函数始终未返回 true，则该回调函数会一直遍历 rows 直到最后。<br />
                    返回值：返回表示当前 easyui-datagrid 组件的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>showRow</td>
                <td>否</td>
                <td>param</td>
                <td>
                    显示当前 easyui-datagrid 当前页数据中指定行的数据；该方法的参数 param 可以是以下两种类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>待查找的行数据的 idField(主键) 字段值；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>function 类型，该回调函数签名为 function(row, index, rows)，其中 row 表示行数据对象、index 表示行索引号、rows 表示当前 easyui-datagrid 调用 getRows 返回的结果集；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>如果 param 参数为 function 类型，则 findRow 方法会对当前 easyui-datagrid 的当前页的每一行数据调用该回调函数；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>当回调函数返回 true 时，则表示找到需要查找的结果，立即停止循环调用并显示该行数据；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>如果回调函数始终未返回 true，则该回调函数会一直遍历 rows 直到最后。<br />
                    返回值：返回表示当前 easyui-datagrid 组件的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>hideRows</td>
                <td>否</td>
                <td>param</td>
                <td>
                    隐藏当前 easyui-datagrid 当前页数据中指定多行的数据；该方法的参数 param 可以是以下三种类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Function 类型，该回调函数签名为 function(row, index, rows)，其中 row 表示行数据对象、index 表示行索引号、rows 表示当前 easyui-datagrid 调用 getRows 返回的结果集；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>如果 param 参数为 Function 类型，则 hideRows 方法会对当前 easyui-datagrid 的当前页的每一行数据调用该回调函数；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>当回调函数返回 true 时，则该行数据将会被隐藏；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Array 类型，数组中的每一项都可以定义为如下类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>待查找的行数据的 idField(主键) 字段值；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Function 类型；具体回调函数签名参考 hideRow 方法中 param 参数为 function 类型时的定义；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>当 param 参数定义为 Array 类型时，则 hideRows 方法会对数组中的每一项循环调用 hideRow 方法；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Boolean 类型且为 true：则 hideRows 将会隐藏 easyui-datagrid 当前页的所有数据。<br />
                    返回值：返回表示当前 easyui-datagrid 组件的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>showRows</td>
                <td>否</td>
                <td>param</td>
                <td>
                    显示当前 easyui-datagrid 当前页数据中指定多行的数据；该方法的参数 param 可以是以下三种类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Function 类型，该回调函数签名为 function(row, index, rows)，其中 row 表示行数据对象、index 表示行索引号、rows 表示当前 easyui-datagrid 调用 getRows 返回的结果集；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>如果 param 参数为 Function 类型，则 hideRows 方法会对当前 easyui-datagrid 的当前页的每一行数据调用该回调函数；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>当回调函数返回 true 时，则该行数据将会被显示；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Array 类型，数组中的每一项都可以定义为如下类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>待查找的行数据的 idField(主键) 字段值；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Function 类型；具体回调函数签名参考 showRow 方法中 param 参数为 function 类型时的定义；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>当 param 参数定义为 Array 类型时，则 hideRows 方法会对数组中的每一项循环调用 showRow 方法；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Boolean 类型且为 true：则 showRows 将会显示 easyui-datagrid 当前页的所有数据。<br />
                    返回值：返回表示当前 easyui-datagrid 组件的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>getHiddenRows</td>
                <td>否</td>
                <td>无</td>
                <td>
                    获取当前 easyui-datagrid 当前页所有隐藏的行数据所构成的一个 Array 对象。<br />
                    返回值：当前页所有隐藏的行数据所构成的一个 Array 对象。
                </td>
            </tr>
            <tr>
                <td>getVisibleRows</td>
                <td>否</td>
                <td>无</td>
                <td>
                    获取当前 easyui-datagrid 当前页所有显示的行数据所构成的一个 Array 对象。<br />
                    返回值：当前页所有显示的行数据所构成的一个 Array 对象。
                </td>
            </tr>
        </table>
    </div>
</div>
